<template>
	<view class="content">
		<view class="top-bar">
			<view class="search-view">
				<image class="search-img" src="../../static/images/search/search.png" mode=""></image>
				<input class="search" @input="search" type="search" placeholder="搜索用户名/群" placeholder-style="color:#aaa;font-weight:400;"/>
			</view>
			<view class="top-bar-right">
				<view class="text" @tap="backOnePage">
					取消
				</view>
			</view>
		</view>
		<view class="main">
			<view class="search-user result">
				<view class="title" v-if="userarr.length>0">
					用户
				</view>
				<view class="list user" v-for="(item,index) in userarr" :key='index'>
					<navigator url="../userhome/userhome?id=aaa" hover-class="none">
						<image :src="item.imgurl" mode=""></image>
					</navigator>
					<view class="names">
						<view class="name" v-html="item.name"></view>
						<view class="email" v-html="item.email"></view>
					</view>
					<view class="right-bt send" v-if="item.tip==1">
						发消息
					</view>
					<view class="right-bt add" v-if="item.tip==0">
						加好友
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import datas from '../../commons/js/datas.js';
	export default {
		data() {
			return {
				userarr:[],
			};
		},
		methods:{
			// 获取关键词
			search: function(e){
				this.userarr = [];
				let search = e.detail.value;
				if(search.length>0){
					this.searchUser(search);
				}
			},
			//寻找关键词匹配的用户
			searchUser: function(e){
				let arr = datas.friend();
				let exp = eval("/"+e+"/g");
				for(let i=0;i<arr.length;i++){
					if(arr[i].name.search(e) != -1 || arr[i].email.search(e) != -1){
						this.isFriend(arr[i]);
						arr[i].imgurl = "../../static/images/img/" + arr[i].imgurl;
						arr[i].name = arr[i].name.replace(exp,"<span style='color:#4AAAFF'>"+e+"</span>");
						arr[i].email = arr[i].email.replace(exp,"<span style='color:#4AAAFF'>"+e+"</span>");
						this.userarr.push(arr[i]);
					}
				}
			},
			//判断是否为好友
			isFriend: function(e){
				let tip = 0;
				var arr = datas.isfriend();
				for(let i=0;i<arr.length;i++){
					if(e.id == arr[i].friend){
						tip = 1;
					}
				}
				e.tip = tip;
			},
			//返回上一个页面
			backOnePage: function(){
				uni.navigateBack({
					detail:1,
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	.top-bar{
		background: rgba($color: #fff, $alpha: 0.96);
		.search-view{
			position: absolute;
			float: left;
			padding: 14rpx 118rpx 14rpx 32rpx;
			top: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			z-index: -1;
		}
		.search{
			height: 60rpx;
			background: $uni-bg-color-grey;
			padding: 0 75rpx 0 12rpx;
			border-radius: 12rpx;
		}
		.search-img{
			position: absolute;
			right: 135rpx;
			top: 24rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	.main{
		padding: 88rpx $uni-spacing-col-base;
		.result{
			padding-top: $uni-spacing-col-base;
			.title{
				font-size: 44rpx;
				font-weight: 600;
				color: $uni-text-color;
				line-height: 60rpx;
			}
			.list{
				width: 100%;
				height: 100rpx;
				padding: 20rpx 0;
				image{
					float: left;
					width: 80rpx;
					height: 80rpx;
					border-radius: $uni-border-radius-base;
				}
				.names{
					float: left;
					padding-left: $uni-spacing-col-base;
					.name{
						float: left;
						font-size: 36rpx;
						color: $uni-text-color;
						line-height: 50rpx;
					}
					.email{
						font-size: $uni-font-size-sm;
						font-weight: 400;
						color: $uni-text-color;
						line-height: 20rpx;
					}
				}
				.right-bt{
					float: right;
					width: 120rpx;
					height: 40rpx;
					border-radius: 24rpx;
					font-size: $uni-font-size-sm;
					font-weight: 400;
					line-height: 40rpx;
					text-align: center;
					margin: 16rpx 0;
					}
					.send{
						background: $uni-color-primary;
						color: $uni-text-color;
					}
					.add{
						background: rgba(74,170,255,0.1);
						color: $uni-color-success;
					}
					
			}
		}
	}

</style>
